<template>
  <div class="user-favo">
    <p class="favo-title">
      <span class="title-left">我的书架</span>
      <!-- <c-divider class="title-divider"/>
      <span class="title-right">最近阅读</span> -->
    </p>
    <c-user-book-list :bookList="allBook.list" :operation="true" @removeitem="removeItem"/>
    <el-pagination class="all-book-pagination" v-if="allBook.total > 0"
      background
      layout='prev, pager, next, jumper, ->, total'
      :total="allBook.total"
      :current-page.sync="pageParam.curr"
      :page-size.sync="pageParam.limit"
      @current-change="handlerPageChange">
    </el-pagination>
  </div>
</template>

<script>
import cDivider from '../../components/util/Divider.vue';
import cUserBookList from '../../components/user/UserBookList.vue';

export default {
  components:{
    cDivider, cUserBookList
  },
  data(){
    return {
      pageParam:{
        curr:1,
        limit:10
      },
      allBook:{
        list:[],
        total:0
      }
    }
  },
  created(){
    this.listBookShelf();
  },
  methods:{
    listBookShelf(){
      this.$http.postForm('/user/listBookShelfByPage', this.pageParam, res => {
        this.allBook.list = res.list;
        this.allBook.total = parseInt(res.total);
      });
    },
    handlerPageChange(currentPage){
      this.pageParam.curr = currentPage;
      this.listBookShelf();
    },
    removeItem(bookId){
      this.$http.postForm('/user/removeFromBookShelf', {bookId}, res=>{
        if(this.allBook.list.length <= 1 && this.pageParam.curr > 1){
          this.pageParam.curr--;
        }
        this.listBookShelf();
      });
    }
  }
}
</script>

<style lang='scss' scoped>
.user-favo {
  padding: 0 25px;
  .favo-title {
    margin: 30px 0 20px 0;
    font-size: 20px;
    .title-left {
      color: $base-color;
    }
    .title-divider{
      margin: 0 20px;
    }
    // .title-right {
      
    // }
  }
  .all-book-pagination{
    padding: 10px 0 15px 0;
  }
}
</style>
